<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    将http强制转换成https请求-->
    <!--    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
    <title>wx-smart</title>
    <link href="./css/main.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">
    <h1>问答数据管理</h1>

    <div class="add-btn">
        <el-button type="primary" size="small" @click="beginAdd">新增问答</el-button>
        &nbsp;&nbsp;&nbsp;


    </div>

    <div>
        <el-table class="table-self"
                  :data="questions"
                  border
                  style="width: 100%">
            <el-table-column
                    v-for="h in headers" :key="h.prop"
                    :prop="h.prop"
                    :label="h.text"
                    :width="h.width"
                    :align="h.align"
            >
            </el-table-column>
            <el-table-column align="center" label="操作" :width="150">
                <template slot-scope="scope">
                    <el-button type="primary" plain icon="el-icon-edit" circle size="mini"
                               @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button type="danger" plain icon="el-icon-delete" circle size="mini"
                               @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="query"
                style="margin-top: 5px"
                background
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>
    </div>

    <el-upload
            action="http://36.137.197.188:8088/question/excelImport">
        <el-button type="primary" size="small" @click="submitUpload">导入</el-button>
    </el-upload>

    <el-dialog title="问答信息" :visible.sync="formVisible" width="30%" style="padding: 0 20px;">
        <el-form :model="question" size="small" label-position="left" :label-width="formLabelWidth">
            <el-form-item label="问题">
                <el-input v-model="question.question" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="回答">
                <el-input v-model="question.answer" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="question.count" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="formVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmEdit">确 定</el-button>
        </div>
    </el-dialog>

</div>
<!--看板娘-->
<script type="text/javascript" charset="utf-8" src="./js/L2Dwidget.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./js/L2Dwidget.min.js"></script>
<script type="text/javascript">
    L2Dwidget.init({
        "display": {
            "superSample": 2,
            "width": 200,
            "height": 400,
            "position": "left",
            "hOffset": 0,
            "vOffset": 0
        }
    });
</script>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    let Token = "";
    // 设置后台服务地址
    axios.defaults.baseURL = "http://127.0.0.1:8088";
    // axios.defaults.baseURL = "http://36.137.197.188:8088";
    axios.defaults.timeout = 3000;

    // axios.defaults.headers["token"] = Token;

    const app = new Vue({
        el: "#app",
        data: {
            headers: [
                {prop: "id", text: "ID", width: 120, align: "center"},
                {prop: "question", text: "问题", width: 0, align: "center"},
                {prop: "answer", text: "回答", width: 0, align: "center"},
                {prop: "count", text: "数量", width: 120, align: "center"}
            ],
            questions: [{"id": 1, "question": "How are you?", "answer": "I'm fine.", "count": 0}],
            total: 1,
            pageSize: 7,
            formVisible: false, // 是否显示表单
            formLabelWidth: "100px", // 表单label宽度
            question: {}, // 表单中的酒店数据
            isEdit: false, // 是否是更新
            lastPage: 1,// 上一次查询的页码
            token: "",
        },
        created() {
            this.getToken();
            this.query(1);
        },
        methods: {
            submitUpload: function () {
                const _this = this;
                _this.$refs.upload.submit().then(resp => {
                    console.log(resp)
                    this.reload();
                });
            },
            beginAdd() {
                this.isEdit = false;
                this.question = {"count": 0};
                this.formVisible = true;
            },
            getToken() {
                axios.post("/login",
                    {name: "admin", password: "123456"}
                ).then(res => {
                    Token = res.data.data;
                }).catch(err => console.log(err));
            },
            query(page) {
                this.lastPage = page;
                axios.get("/question/list", {
                    params: {
                        pageIndex: page, pageSize: this.pageSize
                    }
                }).then(resp => {
                    // console.log(resp)
                    this.questions = resp.data.data.records;
                    this.total = resp.data.data.total;
                }).catch(err => console.log(err));
            },
            handleEdit(v1, v2) {
                this.isEdit = true;
                this.question = JSON.parse(JSON.stringify(v2));
                this.formVisible = true;
            },
            handleDelete(v1, v2) {
                this.$confirm('此操作将永久删除酒店信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteById(v2.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            confirmEdit() {
                if (this.isEdit) {
                    axios.post("/question/addOrUpdate", this.question)
                        .then(resp => {
                            if (resp.data.flag && resp.data.data) {
                                this.$message({
                                    message: '更新成功',
                                    type: 'success'
                                });
                                this.formVisible = false;
                                this.reload();
                            } else {
                                this.$message({
                                    message: '错误信息:' + resp.data.data,
                                    type: 'error'
                                });
                                console.log(err);
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: '更新失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                } else {
                    axios.post("/question/addOrUpdate", this.question)
                        .then(resp => {
                            if (resp.data.flag && resp.data.data) {
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                                this.formVisible = false;
                                this.reload();
                            } else {
                                this.$message({
                                    message: '错误信息:' + resp.data.data,
                                    type: 'error'
                                });
                                console.log(err);
                            }
                        })
                        .catch(err => {
                            this.$message({
                                message: '新增失败',
                                type: 'error'
                            });
                            console.log(err);
                        })
                }

            },
            deleteById(id) {
                axios.delete("/question/delete/" + id)
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.reload();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        });
                        console.log(err);
                    })
            },
            reload() {
                this.query(this.lastPage);
            }
        }
    })
</script>
</body>
</html>